<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="handleCancel"
    destroyOnClose
  >
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">

    </div>
    <div>
      <div class="list">
        <van-list
          v-model="loading"
          :finished="finished"
          offset="100"
          finished-text="没有更多了"
          @load="onLoadList"
          :immediate-check="false"
        >
          <div
            class="customer-list"
            v-for="(item,i) in dataSource"
            :key="i"
          >
            <div>
              <div class="name">材料名称：{{ item.material.materialName || '无' }}</div>
              <div class="contact">
                <span>型号：{{ item.material.modelNumber || '无' }}</span>
                <span style="margin-left: 20px;">规格：{{ item.material.specifications||'无' }}</span>
              </div>
              <div class="contact">
                <span>品牌：{{ item.material.brand || '无' }}</span>
                <span style="margin-left: 20px;">单位：{{ item.material.unit || '无' }}</span>
              </div>
              <div class="contact">
                <span>预算数量：{{ item.quantity }}</span>
                <span style="margin-left: 20px;margin-right: 20px">本次下单数量：{{ item.thisOrderQuantity }}</span>
                <span>待下单数量：{{ item.expectQuantity }}</span>
              </div>
              <div class="contact">
                <span>单价：{{ item.unitPrice }}</span>
                <span style="margin-left: 20px;">小计：{{ item.subtotal }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>

  </a-drawer>
</template>

<script>
  import { filterObj } from '@/utils/util'
  import { getAction, postAction } from '@/api/manage'
  export default {
    name: "placeOrderDetailModal",
    data() {
      return {
        width: '100%',
        model: {},
        title: "",
        columns:[
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            },
            fixed: 'left'
          },
          {
            title:'材料编号',
            align:"center",
            dataIndex: 'material.materialSerial'
          },
          {
            title:'名称',
            align:"center",
            dataIndex: 'material.materialName',
            width: "15%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '15%',
                }
              }
            }
          },
          {
            title:'型号',
            align:"center",
            dataIndex: 'material.modelNumber',
            width: "10%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '10%',
                }
              }
            }
          },
          {
            title:'规格',
            align:"center",
            dataIndex: 'material.specifications',
            width: "10%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '10%',
                }
              }
            }
          },
          {
            title:'品牌',
            align:"center",
            dataIndex: 'material.brand',
            width: "10%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '10%',
                }
              }
            }
          },
          {
            title:'单位',
            align:"center",
            dataIndex: 'material.unit',
            width: "5%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '5%',
                }
              }
            }
          },
          {
            title:'单价/元',
            align:"center",
            dataIndex: 'unitPrice',
            customRender:function (text) {
              if (text == "" || text == null){
                return "-"
              }else {
                return text
              }
            }
          },
          {
            title:'预算数量',
            align:"center",
            dataIndex: 'quantity',
            customRender:function (text) {
              if (text == null){
                return "-"
              } else {
                return text
              }
            }
          },
          {
            title:'本次下单数量',
            align:"center",
            dataIndex: 'thisOrderQuantity',
            customRender:function (text) {
              if (text == null){
                return "-"
              } else {
                return text
              }
            }
          },
          {
            title:'待下单数量',
            align:"center",
            dataIndex: 'expectQuantity',
            customRender:function (text) {
              if (text == null){
                return "-"
              } else {
                return text
              }
            }
          },
          {
            title:'小计/元',
            align:"center",
            dataIndex: 'subtotal',
            customRender:function (text) {
              if (text == "" || text == null){
                return "-"
              } else {
                return text
              }
            }
          },
        ],
        visible: false,
        finished: false,
        // 查询条件
        queryParam: {},
        //数据集
        dataSource: [],
        loading: false,
        selectedRowKeys: [],
        selectedRows: [],
        ipagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        url: {
          placeOrderItemList: "/ghProjectPlaceOrderItem/list",
        },
        currentPlaceOrderId: 0,
      }
    },
    created() {

    },
    methods: {
      handleCancel() {
        this.visible = false;
        this.onClearSelected();
      },
      onLoadList(e){
        this.ipagination.current++
        this.loadData(this.ipagination.current)
      },
      loadData(arg) {
        this.loading = true;
        if (arg === 1) {
          this.ipagination.current = 1;
          this.dataSource = []
          this.finished = false;
        }
        let params = {};
        params.placeOrderId = this.currentPlaceOrderId
        getAction(this.url.placeOrderItemList,params).then((res) => {
          if (res.success) {
            this.dataSource = [...this.dataSource, ...res.result.records]
            if (res.result.total) {
              this.ipagination.total = res.result.total;
            } else {
              this.ipagination.total = 0;
            }
          } else {
            this.$message.warning(res.message)
          }
          if(res.result.records.length<10){
            this.finished = true;
          }
        }).finally(() => {
          this.loading = false
        })
      },
      onClearSelected() {
        this.selectedRowKeys = [];
        this.selectedRows = [];
      },

      show(placeOrderId){
        this.currentPlaceOrderId = placeOrderId;
        this.visible = true;
        this.title = "材料详情";
        this.loadData(1);
      },
    }
  }
</script>

<style scoped>
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .list{
    overflow-y: scroll;
    height:100vh;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .customer-list {
    align-items: center;
    border-top: 1px solid #d9d9d9;
    /*height: 120px;*/
  }
  .name{
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 13px;
    color: #161616;
    line-height: normal;
  }
  .contact{
    font-size: 12px;
    color: #a39f9f;
    margin-bottom: 5px;
  }

</style>